<template>
	<view style="width: 100%;height: 1500rpx;">
		<view class="peisong-box">
			<view style="font-size: 12px;">请选择配送方式</view>
			<view class="peisongType">
				<radio-group name="peisongType" @change="selectPeisong">
					<view>
						<label @click="toZitidian()">
							<radio :value="ziti" :checked="type==ziti" /><text>自提</text>
						</label>
					</view>
					<view>
						<label>
							<radio :value="kuaidi" /><text>快递</text>
						</label>
					</view>
				</radio-group>
			</view>
			<view class="dizhi-wrapper" v-show="type=='kuaidi'">
				<view class="dizhi-box">
					<view class="dizhi-info">
						<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
							<view>收货人：{{adName}}</view>
							<view>
								{{adPhone}}
							</view>
						</view>
						<view style="display: flex;justify-content: space-between;">
							<view style="width: 260px;">收货地址：<text class="moren">[默认]</text> {{adDetail}}</view>
							<view class="other-box" @click="otherDizhi()">其他地址 <uni-icons type="arrowright" size="20"></uni-icons></view>
						</view>
					</view>
				</view>
			</view>
			<view class="dizhi-wrapper" v-show="type=='ziti'">
				<view class="dizhi-box">
					<view class="dizhi-info">
						<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
							<view>自提点：{{zitiName}}</view>
							<view>
								{{zitiPhone}}
							</view>
						</view>
						<view>自提地址：{{zitiAddress}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tips tips2">商品信息</view>
		<view class="order-box" v-for="(item,i) in catsInfo" :key="item.index">
			<view class="goods-info">
				<view>
					<image :src="switchImg(item.goods.gImages)" class="goods-img" mode="heightFix"></image>
				</view>
				<view class="goods-name">
					<view>
						<view>{{item.goods.gName}}</view>
						<view class="qian">{{item.money}}/{{item.goods.gDanwei}}</view>
					</view>
					<view>
						<view class="guige">{{item.guiges}}</view>
						<view>×{{item.scatNum}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="peisong-box xingzhi">
			<view class="bot-border">此商品性质不支持7天退货</view>
			<view class="yunfei-box" v-if="type==kuaidi">
				<view>运费</view>
				<view>{{yunfei}}元</view>
			</view>
			<view>
				<view>买家留言：<input type="text" v-model="liuyan" placeholder="选填:对本次交易的说明" style="border: 1rpx #CCCCCC solid;padding: 15rpx;" /></view>
			</view>
		</view>
		<view class="bottom">
			<view>
				共<text>{{num}}</text>件 总金额：<text class="qian">{{allMoney}}</text>
			</view>
			<view class="confirm-btn" @click="goPay()">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ziti:"ziti",
				kuaidi:"kuaidi",
				type:'',		// 配送类型
				liuyan:"",		// 留言备注
				adid:"",		// 收货地址编号
				adName:"",		// 收货人信息
				adDetail:"",	// 收货地址
				adPhone:"",		// 收货人电话
				catids:'',		// 购物车集合
				allMoney:0,		// 总价格
				yunfei:0,		// 订单运费
				catsInfo:[],	// 购物车信息集合
				num:0,			// 总数量/件数
				gid:'',			// 商品ID
				
				zitiId:'',		// 自提点ID
				zitiName:'',	// 自提点名称
				zitiAddress:'',	// 自提点地址
				zitiPhone:'',	// 自提点电话
			}
		},
		onLoad(opt) {
			this.catids = opt.catids;
			this.yunfei = opt.yunfei;
			// if(!this.isNull(opt.liuyan)){
			// 	this.liuyan = opt.liuyan;
			// }
			
			//选中的自提点
			this.type = opt.type;
			this.zitiId = opt.zitiId;
			this.zitiName = opt.zitiName;
			this.zitiAddress = opt.zitiAddress;
			this.zitiPhone = opt.zitiPhone;
			
			this.getAddressAndGoods();
			uni.$on('getDizhi',this.getDizhi);
		},
		methods: {
			// 选择自提点
			toZitidian(){
				uni.navigateTo({
					url:'zitidian?gid='+this.gid+'&yunfei='+this.yunfei+'&catids='+this.catids+'&getBack=2'
				})
			},
			// 获取收货地址from 立即购买
			getDizhi(){
				let uid = uni.getStorageSync('usersId');
				this.$http.get('/xieliancat.do?p=getAllAddress', {
					'userid':uid
				}).then(response => {
					this.adid = response.data.adId;
					this.adName = response.data.adName;
					this.adDetail = response.data.adDetail;
					this.adPhone = response.data.adPhone;
				})
			},
			// 选择配送方式
			selectPeisong(res){
				this.getDizhi();
				this.type = res.detail.value;
				if(res.detail.value=='ziti'){
					// console.log("留言1："+this.liuyan)
					uni.navigateTo({
						url:'zitidian?gid='+this.gid+'&liuyan='+this.liuyan+'&yunfei='+this.yunfei+'&catids='+this.catids+'&getBack=2'
					})
				}else{
					this.allMoney = (this.allMoney*1+this.yunfei*1).toFixed(2);
				}
			},
			// 得地址和商品信息
			getAddressAndGoods(){
				this.$http.get('/ppgxShopCat/getAllAddressAndGoodsxcx',{
					catids:this.catids
				}).then(res => {
					// console.log("得地址和商品信息")
					// console.log(res)
					this.catsInfo = res.data.catlist;
					this.allMoney = res.data.sum;
					this.allMoney = this.allMoney.toFixed(2)
					// console.log(this.catsInfo[0])
					this.gid = this.catsInfo[0].gId;
					let countMoney = 0;
					for (var i = 0; i < this.catsInfo.length; i++) {
						this.num = this.num + this.catsInfo[i].scatNum;
						countMoney = countMoney + (this.catsInfo[i].money*this.catsInfo[i].scatNum);
					}
					countMoney = countMoney + this.yunfei;
					// console.log("循环得的总金额："+countMoney+" 后台传的总金额："+this.allMoney)
					// console.log(this.catsInfo)
				})
			},
			// 点击提交订单
			goPay(){
				if(this.isNull(this.type)){
					this.$u.toast("请选择收货方式");
					return;
				}
				if(this.allMoney < 0){
					this.$u.toast("金额小于0，请联系商家更改商品信息！");
					return;
				}
				for (var i = 0; i < this.catsInfo.length; i++) {
					if(this.catsInfo[i].goods.orStatus==0){
						this.$u.toast("该订单有下架商品，无法购买")
						break
					}
				}
				if(this.type=='ziti'){
					this.adid = this.zitiId;
				}
				if(this.isNull(this.adid)){
					this.$u.toast("请选择收货地址")
					return
				}
				this.$http.get('/ppOrder/ppCatSubmitOrderxcx', {	// type=1表示不打折
						'userid':uni.getStorageSync("usersId"),
						"catids":this.catids,
						"adid":this.adid,
						"beizhu": this.liuyan,
						"yunfei":this.yunfei,
						"price":this.allMoney,
						"index":this.type=='ziti' ? '0' : '1',
				}).then(res => {
					// console.log("购物车结算")
					// console.log(res)
					if(res.data=="请先登录"){
						this.$u.toast("请先登录！");
						return
					}
					if(res.data=="未找到购物车"){
						this.$u.toast("未找到购物车！");
						return
					}
					if(res.data=="未找到商品"){
						this.$u.toast("未找到商品！");
						return
					}
					if(res.data=="库存不足"){
						this.$u.toast("库存不足！");
						return
					}
					// 提交订单成功后，删除购物车
					// 刷新数据
					uni.$emit('getPinpaiCat');
					uni.$emit('checkPinpaiUserInfo');
					uni.$emit('getPinpaiOrderByGroup');
					// 再转到订单确认
					uni.navigateTo({
						url:'submitOrder?orid='+res.data+'&money='+this.allMoney+'&gimages='+this.catsInfo[0].goods.gImages+'&id=2'
					})
				})
			},
			// 设置图片路径
			switchImg(s){
				return this.host+s;
			},
			// 点击其他地址
			otherDizhi(){
				uni.navigateTo({
					url:'../../pages/center/shouHuo?from=2'
				})
			},
			// 判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		},
	}
</script>

<style scoped>
	.peisong-box{
		padding: 20rpx;
		background-color: white;
	}
	.dizhi-box{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		font-size: 14px;
	}
	.peisongType view{
		margin-top: 25rpx;
		padding-bottom: 25rpx;
		border-bottom: 1rpx #c8ccd4 solid;
	}
	.xingzhi{
		margin-top: 20rpx;
		padding-top: 0rpx;
	}
	.xingzhi>view{
		padding: 10rpx;
	}
	.bot-border,.yunfei-box{
		border-bottom: 1rpx solid #F4F4F5;
		height: 100rpx;
		line-height: 100rpx;
	}
	.tips{
		margin-top: 20rpx;
		background-color: white;
		padding-top: 20rpx;
		padding-left: 20rpx;
		font-size: 22rpx;
	}
	.tips2{
		padding-bottom: 20rpx;
	}
	.confirm-btn{
		background-color: #FF7900;
		color: white;
		display: flex;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0rpx 60rpx;
	}
	.dizhi-box .dizhi,.dizhi-box .mapdot{
		flex: 1;
		text-align: center;
		/* margin-right: 20rpx; */
	}
	.dizhi-box .dizhi-info{
		flex: 5;
	}
	.moren{
		color: red;
	}
	.other-box{
		display: flex;
		justify-content: flex-end;
		margin-top: 10rpx;
	}
	.yunfei-box{
		display: flex;
		justify-content: space-between;
	}
	.dizhi-box .tel{
		flex: 2;
	}
	.bottom{
		padding-left: 10rpx;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background: #F4F4F5;
		display: flex;
		justify-content: space-between;
	}
	.bottom text{
		color: red;
	}
	.goods-info{
		margin-top: 7rpx;
		display: flex;
		padding: 10rpx;
		height: 170rpx;
		align-items: flex-start;
		color: #111111;
		background-color: white;
	}
	.goods-info>view{
		flex: 1;
	}
	.guige{
		margin-top: 10rpx;
		/* color: #CCCCCC; */
		font-size: 12px;
	}
	.qian::before{
		content: '￥';
	}
	.goods-name>view{
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		margin-left: 15rpx;
	}
	.goods-info>view:nth-child(2){
		flex: 4;
	}
	.goods-info .goods-img{
		height: 150rpx;
		max-width: 160rpx;
	}
</style>
